<template>
  <div class="mgtb-40">
    <div class="border-1 border-r pdlr-10">
      <div class="font-20 color-f fontW-7 mg-2 ">
        <img src="../../assets/icon/broker.svg" alt="" style="margin:0 5px 5px 0">
        {{$t('index.broker')}}
      </div>
      <div class="box flex-s-around mgtb-40">
        <div  class="flex-dc-s-between flex-1 " v-for="(item, i) in 5" :key="i">
          <template v-if="i<brokerData.length">
            <div style="width:37%"><img :src="brokerData[i].img_url" alt="" style="width:100%"></div>
            <div class="fontW-7 font-25 color-f mgb-10">{{brokerData[i].name}}</div>
            <div style="width:79%">
              <div class="text-r font-15 fontW-7 color-f">{{brokerData[i].complete}}%</div>
              <el-progress :percentage="brokerData[i].complete" :stroke-width="13" :show-text="false" color="#fe66c4"></el-progress>
            </div>
            <div class="font-15 fontW-7 color-f">{{$t('buypage.complete_deg')}}</div>
            <div style="width:73%" class="color-f font-25 fontW-7">
              <el-button type="primary" class="border-r bg-ffc4 color-f font-f-ib font-26 fontW-7 btnHove" @click="onjoinShow" ref="refbtn">{{$t('broker.tuxedo')}}</el-button>
            </div>
          </template>
          <template v-else>
            <div style="width:37%" class="radius-50 bd-2_d8">
              <img src="../../assets/img/tx1.svg" alt="" class="opacity-0" style="width:100%">
            </div>
            <div class="fontW-7 font-25 color-f mgb-10 opacity-0">Joha bro</div>
            <div style="width:79%">
              <div class="text-r font-15 fontW-7 color-f opacity-0">50%</div>
              <div class="border-r bd-2_d8">
                <el-progress :percentage="77" :stroke-width="13" :show-text="false" color="#fe66c4" class="opacity-0"></el-progress>
              </div>
            </div>
            <div class="font-15 fontW-7 color-f opacity-0">{{$t('buypage.complete_deg')}}</div>
            <div style="width:73%" class="color-f font-25 fontW-7  bd-r-10  bd-2_d8">
              <el-button type="primary" class="border-r bg-ffc4 color-f font-f-ib font-26 fontW-7 opacity-0 btnHove">{{$t('broker.tuxedo')}}</el-button>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import Join from '../component/Join'
export default {
  props: ['brokerData'],
  data () {
    return {
      joinShow: true
    }
  },
  mounted () {
    console.log(this.brokerData)
  },
  methods: {
    onjoinShow: function () {
      console.log('ok')
      this.$EventBus.$emit('joinbus', this.joinShow)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-progress-bar__outer{
  height: 20px;
}
/deep/.el-button--primary {
  width: 100%;
  border: 0;
  padding: 18px 20px;
}
/deep/.el-button--primary:focus,.el-button--primary:hover {
  background: #fe66c4;
  color: #fff;
  border: 0;
}
</style>
